<!DOCTYPE html>
<html>
<head>
	<title>Stock Prices</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link rel="shortcut icon" href="/images/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
	<script type="text/javascript" src="/js/util.js"></script>
	<style type="text/css">
		/*<![CDATA[*/
		body {
			color: #333333;
			line-height: 150%;
		}

		thead {
			font-weight: bold;
			background-color: #CCCCCC;
		}

		.odd {
			background-color: #FFCCCC;
		}

		.even {
			background-color: #CCCCFF;
		}

		.minus {
			color: #FF0000;
		}

		/*]]>*/
	</style>

</head>

	<body>

		<h1>Stock Prices</h1>

		<table>
	   		<thead>
	    		<tr>
	     			<th>#</th>
	     			<th>symbol</th>
	     			<th>name</th>
	     			<th>price</th>
	     			<th>change</th>
	     			<th>ratio</th>
	    		</tr>
			</thead>
			<tbody>
			{% for item in items %}
				<tr class="{% if (loop.index + 1) is even %}even{% else %}odd{% endif %}">
			    	<td>{{loop.index + 1}}</td>
			    	<td>
			    		<a href="/stocks/{{ item.symbol }}">{{item.symbol}}</a>
			    	</td>
			     	<td>
			     		<a href="{{ item.url }}">{{item.name}}</a>
			     	</td>
			     	<td>
			     		<strong>{{ item.price }}</strong>
			     	</td>

					{% if item.change < 0.0 %}
						<td class="minus">{{item.change}}</td>
						<td class="minus">{{item.ratio}}</td>
					{% else %}
						<td>{{item.change}}</td>
						<td>{{item.ratio}}</td>
					{% endif %}

				</tr>
			{% endfor %}
			</tbody>
		</table>
	</body>
</html>
